<template>
    <div>
      <!--餐品管理表格-->
      <el-table
        :data="foods"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="cateId"
          label="类别"
          width="180">

        </el-table-column>
        <el-table-column
          prop="description"
          label="详情">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="totalSales"
          label="月销量">
        </el-table-column>
        <el-table-column
          prop="isDefault"
          label="操作"
          align="right">
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              @click="handleAdd">新增</el-button>
          </template>

          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增餐品对话框-->
      <div>
        <el-dialog
          title="新增餐品"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose">
          <el-form label-position="right" label-width="80px" :model="newFood">
            <el-form-item label="餐品名称">
              <el-input v-model="newFood.title"></el-input>
            </el-form-item>
            <el-form-item label="餐品类别">
              <el-radio-group v-model="newFood.cateId">
                <el-radio v-for="cate in cates" :key="cate.id" :label=cate.id>{{ cate.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="newFood.description"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-input v-model="newFood.cover"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="newFood.price"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onAdd">添加餐品</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!--修改餐品对话框-->
      <div>
        <el-dialog
          title="修改餐品"
          :visible.sync="dialogVisible2"
          width="30%"
          :before-close="handleClose">
          <el-form label-position="right" label-width="80px" :model="updateFood">
            <el-form-item label="餐品名称">
              <el-input v-model="updateFood.title"></el-input>
            </el-form-item>
            <el-form-item label="餐品类别">
              <el-radio-group v-model="updateFood.cateId">
                <el-radio v-for="cate in cates" :key="cate.id" :label=cate.id>{{ cate.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="updateFood.description"></el-input>
            </el-form-item>
            <el-form-item label="图片">
              <el-input v-model="updateFood.cover"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="updateFood.price"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onUpdate">修改餐品</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
</template>

<script>
    export default {
        name: "FoodManage",
      inject: ['reload'],
      data() {
        return {
          dialogVisible1: false,  //新增弹出框
          dialogVisible2: false,  //修改弹出框
          // 类别列表
          cates: [],
          // 餐品列表
          foods: [],
          // 新增类别信息
          newFood: {
            restaurantId: null,
            cateId: null,
            title: '',
            description: '',
            cover: '',
            price: null,
            addTime: null
          },
          //修改类别信息
          updateFood: {
            id: null,
            cateId: null,
            title: '',
            description: '',
            cover: '',
            price: null,
          }
        }
      },
      // 初始化餐品和类别列表
      created() {
          this.$axios({
            method: "get",
            url: "/food/init",
            params: {
              rid: this.$store.getters.rid
            }
          })
            .then(response => {
              if (response.data.success) {
                this.foods=response.data.food_list;
                this.cates=response.data.cate_list;
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error));
      },
      methods: {
        // 关闭对话框
        handleClose(done) {
          // this.$confirm('确认关闭？')
          //   .then(_ => {
          //     done();
          //   })
          //   .catch(_ => {});
          done();
        },
        handleAdd: function () {
          this.dialogVisible1 = true;
        },
        //修改
        handleEdit(index, row) {
          this.updateFood.id=row.id;
          this.updateFood.cateId=row.cateId;
          this.updateFood.title=row.title;
          this.updateFood.description=row.description;
          this.updateFood.cover=row.cover;
          this.updateFood.price=row.price;
          this.dialogVisible2=true;
        },
        //删除
        handleDelete(index, row) {
          this.$axios({
            method: "get",
            url: "/food/delete",
            params: {
              id: row.id
            }
          })
            .then(response => {
              console.log(response.data.message);
              this.reload();
            })
            .catch(error => console.log(error));
        },
        // 添加新餐品
        onAdd() {
          this.$axios({
            method: "post",
            url: "/food/newfood",
            data: {
              restaurantId: this.$store.getters.rid,
              cateId: this.newFood.cateId,
              title: this.newFood.title,
              description: this.newFood.description,
              cover: this.newFood.cover,
              price: Number.parseFloat(this.newFood.price),
              addTime: new Date().getTime()
            }
          })
            .then(response => {
              console.log(response.data.message);
              this.reload();
            })
            .catch(error => console.log(error));
        },
        // 提交更新
        onUpdate() {
          this.$axios({
            method: "post",
            url: "/food/update",
            data: {
              id: this.updateFood.id,
              cateId: this.updateFood.cateId,
              title: this.updateFood.title,
              description: this.updateFood.description,
              cover: this.updateFood.cover,
              price: Number.parseFloat(this.updateFood.price)
            }
          })
            .then(response => {
              console.log(response.data.message);
              this.reload();
            })
            .catch(error => console.log(error));
        },
      }
    }
</script>

<style scoped>

</style>
